<template>
  <div style="padding: 20px 20px 40px 20px">
    <el-form inline>
      <el-form-item label="填写人"
        >
        <el-select clearable @change="search" v-model="params.userId" placeholder="请选择" filterable >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
        </el-form-item>
      <el-form-item label="提交日期">
        <el-date-picker
          v-model="params.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          clearable
          placeholder="开始时间">
        </el-date-picker>
        <span>-</span>
        <el-date-picker
          @change="search" 
          value-format="yyyy-MM-dd"
          v-model="params.endDate"
          type="date"
          clearable
          placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="阅读状态">
        <el-select clearable @change="search"  v-model="params.status" placeholder="请选择">
          <el-option label="未读" :value="0"></el-option>
          <el-option label="已读" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交状态">
        <el-select clearable @change="search"  v-model="params.type" placeholder="请选择">
          <el-option label="未提交" :value="0"></el-option>
          <el-option label="已提交" :value="1"></el-option>
          <el-option label="补交" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="add" size="mini" type="warning">新增周报</el-button>
      </el-form-item>
    </el-form>
    <el-card style="width: 100%; margin-top: 20px" class="box-card">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          type="index"
          fixed
          :index="indexMethod"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          label="填写人"
          fixed
          width="220"
          prop="userName"
          align="center"
        ></el-table-column>
        <el-table-column
          fixed
          label="汇报时间"
          align="center"
        >
        <template slot-scope="scope">
          <span>{{scope.row.startDate + ' 至 ' + scope.row.endDate}}</span>
        </template>
        </el-table-column>
        <el-table-column
          label="提交日期"
          prop="submitDate"
          align="center"
        ></el-table-column>
        <el-table-column
          label="阅读状态"
          align="center"
        >
        <template slot-scope="scope">
          <span>{{scope.row.status == 0?'未阅读':scope.row.status == 1?'已阅读':'-'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          label="评语"
          show-overflow-tooltip
          prop="comment"
          align="center"
        ></el-table-column>
        <el-table-column
          label="提交状态"
          prop="type"
          align="center"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.type != 2">{{scope.row.type == 0?'未提交':scope.row.type == 1?'正常提交':'-'}}</span>
          <span style="text-color:red" v-else>补交</span>
        </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="360"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)"
              v-if="$store.state.user.userId == scope.row.userId"
              >修改</el-button
            >
            <el-button
              type="warning"
              size="mini"
              @click="getRead(scope.row)"
              >记录</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="see(scope.row)">查看
            </el-button>
            <el-button
              type="success"
              size="mini"
              v-if="$store.state.user.userId != scope.row.userId"
              @click="getComment(scope.row)"
              >评语</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 已读记录 -->
    <el-dialog title="阅读记录" :visible.sync="visRead">
        <el-table border :data="readData">
            <el-table-column label="阅读时间" width="160" prop="readTime" align="center"></el-table-column>
            <el-table-column label="阅读人" width="120" prop="username" align="center"></el-table-column>
            <el-table-column label="评语" show-overflow-tooltip prop="comment" align="center"></el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="readTotal > 0"
            :total="readTotal"
            :page.sync="readParams.pageNum"
            :limit.sync="readParams.pageSize"
            @pagination="getReadList"
          />
        </div>
    </el-dialog>
    <el-dialog title="评语" :visible.sync="visComment">
      <el-form>
        <el-form-item label="周报评语:">
          <el-input  placeholder="默认:已阅" type="textarea" v-model="form.comment"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visComment = false" size="mini"
          >取消</el-button
        >
        <el-button @click="sure()" type="primary" size="mini"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList00 , readList , commSure , user } from '@/api/weekly.js'
export default {
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 10,
        date: "",
        type: "",
      },
      userList:[],
      readParams:{
        pageNum: 1,
        pageSize: 10,
        weeklyId:''
      },
      readTotal:0,
      pageTotal: 0,
      // 周报评语
      form:{
        comment:'',
        weeklyId:'',
        userId:''
      },
      valueComment:'',
      options: [],
      tableData: [],
      readData:[],
      visRead: false,
      visComment:false,
      loading:false
    };
  },
  created() {
    this.getList()
    this.getUser()
  },
  methods: {
    indexMethod(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + 1 + index;
    },
    add() {
      this.$router.push('add')
    },
    search() {
      this.params.pageNum = 1;
      this.getList()
    },
    getRead(row) {
        this.readParams.weeklyId = row.id
        this.getReadList()
        this.visRead = true
    },
    // 查看
    see(row){
      this.$router.push({path:'see',query:{id:row.id,type:1}})
    },
    // 打开周报弹窗
    getComment(row) {
      this.form = {
        comment:'',
        weeklyId:row.id,
        userId:this.$store.state.user.userId
      }
      this.visComment = true
    },
    //   修改
    handleEdit(row) {
      this.$router.push({path:'add',query:{id:row.id,type:2}})
    },
    // 确定
    sure() {
      if(this.form.comment == ''){
        this.form.comment = '已阅'
      }
        commSure(this.form).then(res => {
          if(res.code == 200){
            this.visComment = false
            this.getList()
            this.$message.success('提交成功')
          }
        })
    },
    // 获取阅读记录
    getReadList() {
      readList(this.readParams).then(res => {
        if(res.code == 200){
          this.readData = res.rows
          this.readTotal = res.total
        }
      })
    },
    // 获取用户列表
    getUser() {
      user().then(res => {
        if(res.code == 200){
          this.userList = res.rows
        }
      })
    },
    // 获取列表
    getList(){
      getList00(this.params).then(res => {
        if(res.code == 200){
          this.tableData = res.rows
          this.pageTotal = res.total
        }
      })
    }
  },
};
</script>

<style>
</style>